<template>
  <div class="task">
    <el-card>
      <!-- 搜索 -->
      <div class="search">
        <el-form :inline="true">
          <el-form-item label="年级：">
            <el-select
              v-model="params.gradeLevel"
              clearable
              placeholder="请选择年级"
              style="width: 120px"
            >
              <el-option v-for="(label, key) in levelMap" :key="key" :label="label" :value="key" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :loading="loading" @click="handleQuery">查询</el-button>
            <el-button :disabled="loading" @click="handleReset">重置</el-button>
            <el-button type="success" @click="handleAdd">添加</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 表格 -->
      <el-table :data="taskList" style="width: 100%" :loading="loading" stripe>
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="title" label="标题" min-width="200" />
        <el-table-column prop="gradeLevel" label="年级" width="120">
          <template #default="{ row }">
            {{ levelMap[row.gradeLevel] || "未知" }}
          </template>
        </el-table-column>
        <el-table-column prop="createUserName" label="发送人" width="120" />
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button size="small" @click="handleEdit(row)">编辑</el-button>
            <el-button type="danger" size="small" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div style="margin-top: 20px">
        <el-pagination
          v-model:current-page="params.pageIndex"
          v-model:page-size="params.pageSize"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import UserAPI from "@/api/system/user.api";
import { ref, onMounted, reactive } from "vue";
import { useRouter } from "vue-router";
import { ElMessageBox, ElMessage } from "element-plus";

interface TaskType {
  id: number;
  title: string;
  gradeLevel: number;
  createUserName: string;
  createTime: string;
}

// 年级映射：1-6 小学，7-9 初中，10-12 高中
const levelMap: Record<number, string> = {
  1: "一年级",
  2: "二年级",
  3: "三年级",
  4: "四年级",
  5: "五年级",
  6: "六年级",
  7: "初一",
  8: "初二",
  9: "初三",
  10: "高一",
  11: "高二",
  12: "高三",
};

const taskList = ref<TaskType[]>([]);
const total = ref(0);
const loading = ref(false);

// 查询参数
const params = reactive({
  gradeLevel: undefined as number | undefined,
  pageIndex: 1,
  pageSize: 10,
});

// 获取任务列表
function getTaskList() {
  loading.value = true;
  UserAPI.getTaskPage(params)
    .then((data: any) => {
      taskList.value = data.list || [];
      total.value = data.total || 0;
    })
    .catch(() => {
      ElMessage.error("获取任务列表失败");
    })
    .finally(() => {
      loading.value = false;
    });
}

function handleQuery() {
  params.pageIndex = 1;
  getTaskList();
}

function handleReset() {
  params.gradeLevel = undefined;
  params.pageIndex = 1;
  getTaskList();
}

function handleSizeChange(size: number) {
  params.pageSize = size;
  params.pageIndex = 1;
  getTaskList();
}

function handleCurrentChange(page: number) {
  params.pageIndex = page;
  getTaskList();
}

const router = useRouter();

function handleEdit(row: TaskType) {
  router.push({ name: "TaskCreate", query: { id: row.id } });
}

function handleAdd() {
  router.push({ name: "TaskCreate" });
}

function handleDelete(row: TaskType) {
  ElMessageBox.confirm(`确认删除任务【${row.title}】吗？`, "提示", {
    type: "warning",
  })
    .then(() => {
      UserAPI.deleteTask(row.id).then(() => {
        ElMessage.success("删除成功");
        if (taskList.value.length === 1 && params.pageIndex > 1) {
          params.pageIndex -= 1;
        }
        getTaskList();
      });
    })
    .catch(() => {});
}

onMounted(() => {
  getTaskList();
});
</script>

<style scoped lang="scss">
.task {
  padding: 16px;
}
</style>
